<template>
  <div class="metamanager-base">
    <div class="metamanagerheader-base">
      <span class="header-title">
        <img src="@/assets/images/logo.png" />
        <span>大数据整合系统</span>
      </span>

      <div class="header-tabbar">
        <div
          :class="`tabBar-item ${
            listIndex === item.id ? ' tabBarItemIndex' : ''
          }`"
          v-for="(item, index) in tabBarItem"
          :key="index"
          @click="handleTab(item)"
        >
          <span class="tabBar-item-text"> {{ item.title }}</span>
        </div>
      </div>
      <div class="header-btn">
        <el-dropdown>
          <span class="flex-row">
            <span>{{ userName ? userName : "个人" }} </span>
            <img :src="avatar" class="avatar-img" />
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="metamanagerheader-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "Home",
  data() {
    return {
      listIndex: "1",
      tabBarItem: [
        {
          title: "数据源",
          id: "1",
          path: "/source",
        },
        {
          title: "数据处理",
          id: "2",
          path: "/process",
        },
        {
          title: "可视化",
          id: "3",
          path: "/visualization",
        },
        {
          title: "数据分析",
          id: "4",
          path: "/analysis",
        },
        {
          title: "数据归档",
          id: "5",
          path: "/archive",
        },
        {
          title: "调度监控",
          id: "6",
          path: "/operlog",
        },
        {
          title: "用户监控",
          id: "7",
          path: "/logininfor",
        },
      ],
      // 头像
      avatar: "",
      userName: "",
    };
  },
  mounted() {
    this.handleTab(this.tabBarItem[0]);
    this.userName = this.$store.state.user.name;
    this.avatar = this.$store.state.user.avatar;
  },
  methods: {
    handleTab(item) {
      this.listIndex = item.id;
      this.$router.push({ path: item.path });
    },
    async logout() {
      ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/index";
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
.metamanager-base {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.metamanagerheader-base {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #0092d6;
  height: 48px;
  overflow: hidden;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-title {
  display: inline-flex;
  font-size: 20px;
  height: 100%;
  align-items: center;
  cursor: pointer;
  padding-right: 6px;

  img {
    height: 36px;
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
  }
}
.header-tabbar {
  width: 700px;
  height: 100%;
  overflow: hidden;
  font-size: 16px;
  flex: 1;

  .tabBar-item {
    min-width: 50px;
    padding: 0 1.5vw;
    height: 100%;
    display: inline-flex;
    align-items: center;

    &-text {
      padding-left: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
      line-height: 20px;
      vertical-align: middle;
    }
  }
  .tabBarItemIndex {
    background-color: #fff;
    color: black;
  }
  .tabBar-item:hover {
    background-color: #77ddff;
  }
}
.metamanagerheader-content {
  position: absolute;
  left: 0;
  top: 48px;
  bottom: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.header-btn {
  font-size: 12px;
  color: #fff;
}
</style>
